<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link href="./flatpickr.min.css" rel="stylesheet">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./flatpickr.js"></script>

    <script>
        Date.prototype.Format = function (fmt) {   
            var o = {
                "M+": this.getMonth() + 1,                      //月份   
                "d+": this.getDate(),                           //日   
                "h+": this.getHours(),                          //小时   
                "m+": this.getMinutes(),                        //分   
                "s+": this.getSeconds(),                        //秒   
                "q+": Math.floor((this.getMonth() + 3) / 3),    //季度   
                "S": this.getMilliseconds()                     //毫秒   
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        $(function () {
            f1 = $(".flatpickr1").flatpickr({
                minDate: "today",
                enableTime: true,
                dateFormat: "Y-m-d H:i:S",
            });

            f2 = $(".flatpickr2").flatpickr({
                minDate: "today",
                enableTime: true,
                dateFormat: "Y-m-d H:i:S",
            });

            var $btn = $("#submit");

            $btn.click(function() {
                var obj = {};
                
                // 番乘番 / 梯坎番
                var result = $("input[name=m_fanType]");
                for (var i=0; i < result.length; i++) { 
                    var t = result[i];
                    if (t.checked) {
                        obj.m_fanType = t.value
                    }
                }

                // 包子选择
                var result = $("input[name=m_baozi]");
                for (var i=0; i < result.length; i++) { 
                    var t = result[i];
                    if (t.checked) {
                        obj.m_baozi = t.value
                    }
                }

                // 番数上限
                var result = $("input[name=m_fanMax]");
                for (var i=0; i < result.length; i++) { 
                    var t = result[i];
                    if (t.checked) {
                        obj.m_fanMax = t.value
                    }
                }

                // 游戏配置
                var gameConfig = JSON.stringify(obj);
                console.log(gameConfig);
                // 比赛开始时间
                var startTime = f1.selectedDates[0].Format("yyyy-MM-dd hh:mm:ss");
                console.log(startTime);
                // 比赛结束时间
                var endTime = f2.selectedDates[0].Format("yyyy-MM-dd hh:mm:ss");
                console.log(endTime);
                // 游戏id
                var gameId = 1000;
                console.log(gameId);

                // 构造json对象
                var jsonObj = {};
                jsonObj.gameConfig = gameConfig;
                jsonObj.startTime = startTime;
                jsonObj.endTime = endTime;
                jsonObj.gameId = gameId;
                var str = JSON.stringify(jsonObj);
                console.log(str);

                $.post("http://127.0.0.1:8080", {"data": str}, function(data){
                    console.log(data); 
                }, "json").error(function(){
                    alert("网络异常");
                }); 
            });
        });
    </script>
</head>

<body>
    <h1>比赛场配置</h1>
    <h2>幺地人</h2>


    <table>
        <tr>
            <th>
                <label>规则选择:</label>
            </th>
            <td>
                <input type="radio" name="m_fanType" value="1" checked="checked">番乘番
            </td>
            <td>
                <input type="radio" name="m_fanType" value="2">梯坎番
            </td>
        </tr>
        <tr>
            <th>
                <label>包子选择:</label>
            </th>
            <td>
                <input type="radio" name="m_baozi" value="1" checked="checked">包子全赔
            </td>
            <td>
                <input type="radio" name="m_baozi" value="2">包子不帮赔
            </td>
            <td>
                <input type="radio" name="m_baozi" value="3">包子不赔
            </td>
        </tr>
        <tr>
            <th>
                <label>番数上限:</label>
            </th>
            <td>
                <input type="radio" name="m_fanMax" value="3" checked="checked">3番
            </td>
            <td>
                <input type="radio" name="m_fanMax" value="4">4番
            </td>
            <td>
                <input type="radio" name="m_fanMax" value="5">5番
            </td>
            <td>
                <input type="radio" name="m_fanMax" value="0">不限番
            </td>
        </tr>
    </table>

    <p style="font-weight:bold">开始时间：
        <span>
            <input class="flatpickr1 flatpickr-input" type="text" placeholder="Select Date.." data-id="race_start_time" readonly="readonly">
        </span>
    </p>
    <p style="font-weight:bold">结束时间：
        <span>
            <input class="flatpickr2 flatpickr-input" type="text" placeholder="Select Date.." data-id="race_end_time" readonly="readonly">
        </span>
    </p>
    <p>
        <input type="submit" value="创建" id="submit">
    </p>

</body>

</html>